<!DOCTYPE HTML>
<html>
 <head>
  <title>商品信息编辑</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" /> 
 </head>
 <body>
  
  <div class="container">

    <div class="row fileborder" style="width:946px;">
      <div class="row myheader01">
          <p>商品列表</p>
      </div>
      <div class="search-grid-container">
        <div id="grid"></div>
      </div>  

       <div class="row myheader01">
          <p>添加商品</p>
      </div>
      <div class="row row02"> 
            <div class="bottom02"> </div>
                <div class="control-group span4" >
                  <select name="" id="" name="mode">
                    <option value="" selected="selected">所有分类</option>
                    <option value=""></option>
                  </select>
                </div>

                <div class="ontrol-group span4" >
                  <select name="" id="" name="type">
                    <option value="">所有商品</option>
                    <option value=""></option>
                  </select>
                </div>

                <div class="ontrol-group span4" >
                  <input type="text" placeholder="商品编号" />
                </div>
                        
               <div class="span3">
                  <span class="myspanBtn">添加</span>
              </div>  
      </div>
      <table class="usertable usertable01" id="usertable01_1" width="946px">  
        <tbody>
            <tr>
              <td>商品编号：</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>商品名称：</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>分类：</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>品牌：</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>价格：</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>属性：</td>
              <td><input type="text" /></td>
            </tr>
            <tr>
              <td>数量：</td>
              <td><input type="text" /></td>
            </tr>
        </tbody>
      </table> 
      
      <div class="row row02">
        <div class="bottom02"></div>
        <span class="myspanBtn spanBtn02">加入订单</span>
      </div>  
      <hr>
       <div class="row row02">
        <span class="myspanBtn spanBtn01">确定</span>
        <span class="myspanBtn">取消</span>
      </div>  
    </div> 

  </div>
  <script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="../assets/js/bui-min.js"></script>
  <script type="text/javascript" src="../assets/js/config-min.js"></script>
  <script type="text/javascript" src="../assets/js/myjs.js"></script> 
  <script type="text/javascript">
    BUI.use('common/page');
  </script>

<script type="text/javascript">
  BUI.use('common/search',function (Search) {
    
   
     var editing = new BUI.Grid.Plugins.DialogEditing({
        contentId : 'content', //设置隐藏的Dialog内容
        autoSave : true, //添加数据或者修改数据时，自动保存
        triggerCls : 'btn-edit'
      }),
      columns = [
         
          {title:'商品图片',dataIndex:'indent-4-0',width:130},
          {title:'商品名称',dataIndex:'indent-4-1',width:130},
         
          {title:'价格',dataIndex:'indent-4-2',width:90},
         
          {title:'数量',dataIndex:'indent-4-3',width:90},
          {title:'库存',dataIndex:'indent-4-4',width:90},
         
          {title:'小计',dataIndex:'indent-4-5',width:90},
          {title:'操作',dataIndex:'',width:90,renderer : function(value,obj){ 
              var delStr = '<span class="grid-command btn-del" title="删除商品信息">[删除]</span>';//页面操作不需要使用Search.createLink
            return  delStr;
          }}
         
        ],
      store = Search.createStore('../data/goods03.json',{
        proxy : {
          save : { //也可以是一个字符串，那么增删改，都会往那么路径提交数据，同时附加参数saveType
            addUrl : '../data/add.json',
            updateUrl : '../data/edit.json',
            removeUrl : '../data/del.php'
          }/*,
          method : 'POST'*/
        },
        autoSync : true //保存数据后，自动更新
      }),
      gridCfg = Search.createGridCfg(columns,{
        // tbar : {
        //   items : [
        //     {text : '<i class="icon-plus"></i>新建',btnCls : 'button button-small',handler:addFunction},
        //     {text : '<i class="icon-edit"></i>编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
        //     {text : '<i class="icon-remove"></i>删除',btnCls : 'button button-small',handler : delFunction}
        //   ]
        // },
        plugins : [editing,BUI.Grid.Plugins.CheckSelection,BUI.Grid.Plugins.AutoFit] // 插件形式引入多选表格
      });

    var  search = new Search({
        store : store,
        gridCfg : gridCfg
      }),
      grid = search.get('grid');

  });
</script>

</body>
</html>  
